<template>
  <je-modal
    v-model:visible="visibleModule"
    width="900px"
    height="700px"
    :title="type == 'base' ? $t('AddEventModal.title') : $t('AddEventModal.nodeTitle')"
    class="add-event"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="addModule"
  >
    <je-grid
      ref="grid"
      border
      auto-resize
      show-overflow="ellipsis"
      keep-source
      show-header-overflow
      resizable
      height="100%"
      size="mini"
      header-align="center"
      draggable
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showUpdateStatus: true,
        showInsertStatus: false,
      }"
      :store="gridStore"
    >
      <je-column width="40" align="center">
        <template #header>
          <i style="font-size: 16px; cursor: pointer" class="fal fa-plus" @click="addColumn"></i>
        </template>
        <template #default="{ row }">
          <i
            style="font-size: 16px; cursor: pointer"
            class="fal fa-times"
            @click="deleteColumn(row)"
          ></i>
        </template>
      </je-column>

      <je-column
        field="typeName"
        :title="$t('AddEventModal.eventType')"
        width="130"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-select
            v-model:value="row.typeName"
            :config-info="
              type == 'base'
                ? 'JE_WF_PROCESSEVENT,typeCode~typeName,code~text,S'
                : 'JE_WF_TASKEVENT,typeCode~typeName,code~text,S'
            "
          />
        </template>
      </je-column>

      <je-column
        field="executionStrategyName"
        :title="$t('AddEventModal.executeStratey')"
        width="130"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-select
            v-model:value="row.executionStrategyName"
            config-info="JE_WF_EXECUTESTRATEY,executionStrategyName~executionStrategyCode,text~code,S"
          />
        </template>
      </je-column>

      <je-column
        min-width="200"
        field="assignmentFieldConfiguration"
        :title="$t('AddEventModal.fieldsConfig')"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-input
            v-model:value.trim="row.assignmentFieldConfiguration"
            :disabled="
              ['EXECUTION_METHOD', 'EXECUTE_SQL_TEMPLATE'].indexOf(row.executionStrategyCode) != -1
            "
          >
            <template #suffix>
              <i style="cursor: pointer" class="fas fa-list-ul" @click="handlerModal(row)"></i>
            </template>
          </je-input>
        </template>
      </je-column>

      <je-column field="serviceName" min-width="200" :edit-render="inputRender">
        <template #header>
          <i class="conditionicon fas fa-question-circle" @click="clickIcon"></i>
          {{ $t('AddEventModal.serviceBean') }}
        </template>
        <template #edit="{ row }">
          <je-input
            v-model:value.trim="row.serviceName"
            :disabled="['FIELD_ASSIGNMENT'].indexOf(row.executionStrategyCode) != -1"
          />
        </template>
      </je-column>

      <!-- <je-column
        field="method"
        :title="$t('AddEventModal.serviceMethod')"
        width="100"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-input v-model:value.trim="row.method" />
        </template>
      </je-column>

      <je-column
        field="existenceParameter"
        :title="$t('AddEventModal.methodParam')"
        width="80"
        align="center"
      >
        <template #default="{ row }">
          <je-switch v-model:value="row.existenceParameter" mode="checkbox" />
        </template>
      </je-column> -->
    </je-grid>
  </je-modal>
  <AssignmentConstructor
    v-if="assignmentConstructor"
    :work-flow-info="workFlowInfo"
    :checked-row="checkedRow"
    @closeModal="closeModal"
  />
  <Explain
    v-if="explainType"
    :modal-context="modalContext"
    width="400px"
    @closEexplain="closEexplain"
  />
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Modal, Grid, Input, Select, Data } from '@jecloud/ui';
  import { inputRender } from '@/helper/edit-render';

  import AssignmentConstructor from './assignment-constructor.vue';
  import Explain from '@/components/explain/index.vue';

  export default defineComponent({
    name: 'AddEventModal',
    components: {
      JeModal: Modal,
      JeGrid: Grid,
      JeColumn: Grid.Column,
      JeInput: Input,
      JeSelect: Select,
      AssignmentConstructor,
      Explain,
    },
    props: {
      type: {
        type: String,
        default: '',
      },
      customEventListeners: {
        type: Object,
        default: () => {
          return {};
        },
      },
      workFlowInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      const visibleModule = ref(false);
      const gridStore = Data.Store.useGridStore({ data: props.customEventListeners });
      const grid = ref(null);
      const assignmentConstructor = ref(false);
      const checkedRow = ref({});

      watch(
        () => visibleModule.value,
        (newData) => {
          if (newData) {
            gridStore.loadData(props.customEventListeners || []);
          }
        },
      );

      //添加列
      const addColumn = () => {
        const obj = {
          typeCode: props.type == 'base' ? 'PROCESS_START' : 'TASK_SUBMIT_BEFORE',
          typeName: props.type == 'base' ? '流程启动' : '提交之前',
          executionStrategyName: '字段赋值',
          executionStrategyCode: 'FIELD_ASSIGNMENT',
          assignmentFieldConfiguration: '',
          serviceName: '',
          method: '',
          existenceParameter: '1',
        };
        gridStore.insert(obj, -1);
      };

      //删除列
      const deleteColumn = (row) => {
        gridStore.remove(row);
      };

      //点击确定
      const addModule = () => {
        emit('changeData', gridStore.data);
      };

      //弹窗赋值构造器
      const handlerModal = (row) => {
        if (['EXECUTION_METHOD', 'EXECUTE_SQL_TEMPLATE'].indexOf(row.executionStrategyCode) != -1) {
          return false;
        }
        checkedRow.value = row;
        assignmentConstructor.value = true;
      };

      //弹窗关闭调
      const closeModal = () => {
        assignmentConstructor.value = false;
      };

      //点击icon
      const modalContext = ref('');
      const explainType = ref(false);
      const clickIcon = () => {
        modalContext.value =
          '执行策略为自定义方法时，请填写业务Bean编码。<br/>执行策略为执行SQL模板时，请填写SQL模板编码。';
        explainType.value = true;
      };
      //弹窗关闭回调
      const closEexplain = () => {
        explainType.value = false;
      };
      return {
        visibleModule,
        addModule,
        addColumn,
        deleteColumn,
        grid,
        inputRender,
        handlerModal,
        assignmentConstructor,
        checkedRow,
        closeModal,
        modalContext,
        explainType,
        clickIcon,
        closEexplain,
        gridStore,
      };
    },
  });
</script>

<style lang="less"></style>
